import './App.css';
import React, { Component } from 'react';

class App extends Component {
  constructor(props){ 
    super(props);
    console.log('constructor');
    this.state = {} //初始化组件状态
  }
  componentWillMount() {
    console.log('componentWillMount 将要挂载');
  }
  componentDidMount() {
    console.log(' componentDidMount 挂载完成');
    //在这里发送网络请求，创建定时器，事件监听，理由是：这个方法只执行一次，而且会自动执行
    // this.timerid=setInterval(() => {
    //   console.log('定时器在执行');
    // }, 1000)
  }
  //更新期（更新期的方法可能会反复调用执行）
  componentWillUpdate() {
    console.log('componentWillUpdate 将要更新');
  }
  componentDidUpdate() {
    console.log('componentDidUpdate 更新完成');
  }
  //卸载期
  componentWillUnmount() {
    console.log('componentWillUnmount 将要卸载');
    //在这里释放所占用的资源（网络请求，创建定时器，事件监听）
    clearInterval(this.timerid);
  }
  //render方法在组件初次渲染时会执行一次，在之后的组件每次更新是都会执行一次。
  render() { //渲染组件模板到视图
    console.log('render');
    return (
      <div>
        <h1 className="class" id="big" onClick={() => { this.handClick() }}>hello reactjs</h1>
      </div>
    );
  }
  handClick(){
    this.setState({count:1});
  }
}

export default App;